<template>
	<view class="pages">
		<image src="../../static/mine/backWhite.svg" class="back-img" @tap="back"></image>
		<image src="../../static/mine/invite.png" class="banner-img"></image>
		
		<view class="code-title">邀请码</view>
		<view class="code">{{invitationCode}}</view>
		
		<view class="text">
			<p>新用户下载APP，绑定邀请码</p>
			<p>邀请好友下载多多生活</p>
			<p class="p">邀请成功，获得奖励</p>
		</view>
		
		<!-- 二维码图片链接 -->
		<view class="qr-box code-img">
			<canvas canvas-id="qrcode" />
		</view>
		
		<image src="../../static/mine/inviteButton.png" class="submit-img" @tap="submit"></image>
		
		<view class="canvasContent">
			<canvas canvas-id="myCanvas" id="myCanvas" class="canvas">
			</canvas>
		</view>
		
	</view>
</template>

<script>
	import { inviteFriends } from '../../api/api.js';
	import uQRCode from '@/common/uqrcode.js';
	export default {
		data() {
			return {
				// 邀请码
				invitationCode:'',
				link:''
			}
		},
		onShow() {
			// 获取邀请信息
			this.getInviteInfo()
		},
		methods: {
			getInviteInfo() {
				let data = {}
				inviteFriends(data).then( res => {
					if( res.code == 200 ) {
						console.log(res.data)
						this.invitationCode = res.data.invitationCode
						this.link = res.data.url
						this.qrFun(this.link) //调用二维码方法
					}
				})
			},
			back() {
				uni.navigateBack({
					delta:1
				})
			},
			qrFun(text) {
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 120,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						var that = this
						uni.canvasToTempFilePath({
							canvasId: 'qrcode',
							success: function(res) {
								uni.setStorageSync('ewmImg', res.tempFilePath)
								that.createCanvas()
							}
						})
					}
				})
			},
			
			// 初始化canvas
			createCanvas(img) {
				const ctx = uni.createCanvasContext('myCanvas')
				let width = uni.getSystemInfoSync().screenWidth
				let wid = width / 375
				let canvasW = 750 / 2 * wid
				let canvasH = 1334 / 2 * wid
				// 二维码位置
				let codeW = 538 / 2 * wid
				let codeH = 269 / 2 * wid
				let codeL = 300 / 2 * wid
				let codeT = 903 / 2 * wid
				// 文字位置
				let codeText = '邀请码:'
				let codeTextL = 319 / 2 * wid
				let codeTextT = 464 / 2 * wid
				let texts = this.invitationCode
				let textsL = 188 / 2 * wid
				let textsT = 556 / 2 * wid
				let text1 = '新用户下载APP，绑定邀请码'
				let text1L = 143 / 2 * wid
				let text1T = 687 / 2 * wid
				let text2 = '邀请好友下载多多生活'
				let text2L = 176 / 2 * wid
				let text2T = 769 / 2 * wid
				let text3 = '邀请成功，获取奖励'
				let text3L = 222 / 2 * wid
				let text3T = 846 / 2 * wid
				var ewmImg = uni.getStorageSync('ewmImg')
				console.log(ewmImg);
				ctx.drawImage('../../static/mine/invite.png', 0, 0, canvasW, canvasH)
				ctx.drawImage(ewmImg, codeL, codeT, codeW, codeH)
				ctx.setFontSize(20)
				ctx.setFillStyle('#C81A37')
				ctx.fillText(codeText, codeTextL, codeTextT)
				ctx.setFontSize(45)
				ctx.setFillStyle('#C81A37')
				ctx.fillText(texts, textsL, textsT)
				ctx.setFontSize(20)
				ctx.setFillStyle('#C81A37')
				ctx.fillText(text1, text1L, text1T)
				ctx.setFontSize(20)
				ctx.setFillStyle('#C81A37')
				ctx.fillText(text2, text2L, text2T)
				ctx.setFontSize(19)
				ctx.setFillStyle('#BF6710')
				ctx.fillText(text3, text3L, text3T)
				ctx.draw()
			},
			
			// 保存海报
			savePosters() {
				var that = this
				uni.canvasToTempFilePath({
					canvasId: 'myCanvas',
					success: function(res) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(res) {
								uni.showToast({
									title: '保存图片成功，请在手机中查看',
									icon: 'none'
								})
							},
							fail: function(err) {
								// console.log(err)
								uni.showToast({
									title: '保存失败，请稍后重试',
									icon: 'none'
								})
							}
						});
					}
				})
			},
			
			submit() {
				// #ifdef APP-PLUS
				// 保存海报
				this.savePosters()
				// #endif
				
				// #ifdef H5 || MP-WEIXIN
				uni.showToast({
					title: '请截图保存到本地',
					icon: 'none'
				})
				// #endif
			}
		}
	}
</script>

<style>
	page {
		/* background-color: RGBA(74, 100, 241, 1); */
	}
</style>
<style lang="less">
     .pages {
		 padding-top: 464rpx;
		 position: relative;
		 // background-color: RGBA(74, 100, 241, 1);
		 .back-img {
			 position: fixed;
			 left: 30rpx;
			 top: 71rpx;
			 z-index: 3;
			 width: 36rpx;
			 height: 36rpx;
		 }
		 .banner-img {
			 width: 750rpx;
			 height: 100vh;
			 position: absolute;
			 top: 0;
			 left: 0;
		 }
		 .code-title {
			position: relative;
			z-index: 1;
			margin-left: 319rpx;
		 	height: 37rpx;
		 	font-family: Adobe Heiti Std;
		 	font-weight: normal;
		 	font-size: 40rpx;
		 	color: #C81A37;
		 	line-height: 94rpx;
		 }
		 .code {
			 position: relative;
			 z-index: 1;
			 margin: 35rpx 0 0 178rpx;
		     font-family: Adobe Heiti Std;
		     font-weight: normal;
		     font-size: 91rpx;
		     color: #C81A37;
		     line-height: 115rpx;
		     text-shadow: 0px 6rpx 0px #F8FDFE;
		 }
		 
		 .code-img {
			 z-index: 1;
			 position: relative;
			 width: 169rpx;
			 height: 200rpx;
			 margin: 0 0 0 250rpx;
		 }
		 .text {
			 width: 750rpx;
			 display: flex;
			 flex-direction: column;
			 align-items: center;
			 margin-top: 79rpx;
			 z-index: 1;
			 position: relative;
			 p {
				 font-family: Adobe Heiti Std;
				 font-weight: normal;
				 font-size: 40rpx;
				 color: #C81A37;
				 margin-bottom: 44rpx;
			 }
			 
			 .p {
				 font-family: Adobe Heiti Std;
				 font-weight: normal;
				 font-size: 28rpx;
				 color: #BF6710;
			 }
		 }
		 .submit-img {
			 z-index: 1;
			 width: 259rpx;
			 height: 67rpx;
			 margin: 80rpx 0 0 245rpx;
		 }
		 
		 .canvasContent {
		 	transform: scale(0);
		 	position: absolute;
		 	width: 750rpx;
		 	height: 1450rpx;
		 	border-radius: 8rpx;
		 	overflow: hidden;
		 
		 	.canvas {
		 		border-radius: 8rpx;
		 		width: 100%;
		 		height: 100%;
		 	}
		 }
	 }
</style>
